<h3>Datepicker</h3>
<section>
  <fui-datepicker-lite [(ngModel)]="date" format="yyyy-MM-dd" placeholder="please select"></fui-datepicker-lite>
  <div style="display: inline-block;">Date: {{date | date:'yyyy-MM-dd'}}</div>
</section>

<h3>Date Time picker</h3>
<section>
  <fui-datepicker-lite [showTime]="true" format="yyyy-MM-dd HH:mm:ss" [(ngModel)]="dateTime"></fui-datepicker-lite>
  <div style="display: inline-block;">Date time: {{dateTime | date:'yyyy-MM-dd HH:mm:ss'}}</div>
</section>

<h3>Preset Datepicker</h3>
<section>
  <fui-datepicker-lite [showTime]="true" [(ngModel)]="presetDateTime"></fui-datepicker-lite>
  <div style="display: inline-block;">Date time: {{presetDateTime | date:'yyyy-MM-dd HH:mm'}}</div>
</section>

<h3>Custom</h3>
<section>
  <fui-datepicker-lite [showTime]="true" [(ngModel)]="customDateTime">
    <ng-template fui-datepicker-lite-content>
      <button fuiBtn="primary">
        <svg fuiIcon="calendar" color="reverse"></svg>
      </button>
    </ng-template>
  </fui-datepicker-lite>
  <div style="display: inline-block;">Date time: {{customDateTime | date:'yyyy-MM-dd HH:mm'}}</div>
</section>
